<template>
  <div id="level-container" class="common-container level-container">
    <main-title id="main-title">
      <div v-if="isAdmin" class="org-select">
        <el-select
          v-model="_state.orgSelect"
          size="small"
          placeholder="请选择组织机构"
          clearable
          filterable
          @change="changeOrg"
        >
          <el-option
            v-for="item in _state.orgOptions"
            :key="item.oid"
            :label="item.name"
            :value="item.oid"
          />
        </el-select>
      </div>
    </main-title>
    <div class="content-wrap">
      <div class="content">
        <div class="content-left ym-box">
          <div class="treewrap">
            <resource-tree
              ref="treeWrapRef"
              :tree-data="_state.treeData"
              node-key="did"
              :show-icon="false"
              :default-expanded-keys="[_state.currentNodeKey]"
              :current-node-key="_state.currentNodeKey"
              @click="handleTreeClick"
            />
          </div>
        </div>
        <div id="level-content" class="content-right">
          <tabs
            v-if="_state.currentDep.did"
            :oid="_state.orgSelect"
            :dep="_state.currentDep"
            :search-dep="searchDep"
          />
          <empty-block v-else />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue'

import Tabs from './components/Tabs.vue'
import EmptyBlock from '@/components/EmptyBlock/index.vue'

import DepApi from '@/api/backend/dep'
import { getOrgList } from '@/api/backend/organization'

import { useUserStore } from '@/store/user'

import { MainTitle, ResourceTree } from '&/mixins/useComponent'
import IBaseObj from '#/index'

const { userInfo } = useUserStore()

const oid = userInfo?.oid || ''

console.log(oid, userInfo)

// 是否是超管
const isAdmin = userInfo.isAdmin > 3

const _state: IBaseObj = reactive({
  treeData: [],
  orgSelect: oid,
  orgOptions: [],
  currentDep: {
    did: '',
  },
  currentNodeKey: '',
})
const treeWrapRef = ref()
const getDepTreeData = async (oid: string) => {
  const ret = await DepApi.getDepTreeByOid(oid)
  _state.treeData = ret.data || []
  if (ret.data.length > 0) {
    const firstDid = ret.data[0].did
    _state.currentNodeKey = firstDid
    nextTick(() => {
      treeWrapRef.value.$refs.treeRef.setCurrentKey(firstDid)
      handleTreeClick(ret.data[0])
    })
  }
}

const searchDep = async () => {
  const ret = await DepApi.getDepTreeByOid(oid)
  _state.treeData = ret.data || []
  _state.currentNodeKey = _state.currentDep.did
  if (ret.data.length > 0) {
    nextTick(() => {
      treeWrapRef.value.$refs.treeRef.setCurrentKey(_state.currentNodeKey)
      handleTreeClick(_state.currentDep)
    })
  }
}

const getOrgOptions = async () => {
  const ret = await getOrgList({})
  _state.orgOptions = ret.data || []

  if (ret.data?.length > 0) {
    getDepTreeData(oid)
  }
}
getOrgOptions()

const changeOrg = (oid: string) => {
  _state.currentDep = {}
  getDepTreeData(oid)
}

const handleTreeClick = (data: IBaseObj) => {
  _state.currentDep = data
  _state.currentNodeKey = data.did
}
</script>

<style lang="scss" scoped>
.org-select {
  height: 60px;
  line-height: 60px;
}

.treewrap {
  height: calc(100%);
}

.level-container {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.content {
  display: flex;
  height: calc(100vh - 70px);
  padding-top: 10px;
  // flex: 1;

  & > div {
    height: 100%;
  }

  &-left {
    width: 330px;
    padding: 5px 1px 5px 5px;
    margin-right: 20px;
    flex-shrink: 0;
  }

  &-right {
    width: 0;
    flex: 1;
  }
}
</style>
@/api/backend/organization
